<template>
    <div class="haha">
        <backHeader>

        </backHeader>
        <div class="datails">
            <h3>{{datails.title}}</h3>
            <div class="user">
                <span>·发布于{{datails.create_at}}</span>
                <!--<span>·作者{{datails.author.loginname}}</span>-->
                <span>·{{datails.visit_count}}次浏览</span>

            </div>
            <div v-html="datails.content" class="content"></div>
           <div class="shoucang"> 
              
            <button >加入收藏</button></div>
             <p>评论区 <span>共{{datails.reply_count}}条回复</span></p>
             <reply  v-for="(news,index) in datails.replies" :re="news" :key="index">
                 <span>{{index + 1}}楼</span>
                  <i class="icon-thumbs-up">{{news.ups.length}}</i>
             </reply>
             <div>
                 <p>添加回复</p>
                 <form action="">
                     <textarea name="" id="" cols="51" rows="10"></textarea>
                     <button>回复</button>
                 </form>
             </div>
        </div>
      
    </div>
</template>
<script>
    import backHeader from "../components/backHeader"
    import reply from "../components/reply"
    export default {
        data() {
            return {
                datails: [],
               
            }
        },
        components: {
            backHeader,reply
        },
        created() {
            this.axios.get(`http://www.vue-js.com/api/v1/topic/${this.$route.params.newsID}`)
                .then(data => {
                    console.log(data.data.data)
                    // this.error = false
                    this.datails = data.data.data
                   
                })
                .catch(err => {

                })
        },
          
    }

</script>
<style scoped>

    .haha {
        overflow: hidden;
      
    }
    .datails {
        width: 95%;
        margin: 40px auto;
        background-color: white;
        padding: 10px
    } 
    .user {
        font-size: 14px;
        color: #999;
    }
    .content{
        margin-bottom: 20px;
    
    }
    p{
        background: #1c6132;
        padding: 3px;
        color: white;
        
    }
    button{
        background-color:#3374de;
        color: white;
        padding: 8px 15px 8px 15px;
        border: none;
        border-radius: 5px
    }
   .shoucang button{
       margin-left: 280px;
       margin-bottom: 10px;
    }
    .icon-thumbs-up{
        margin-right: 20px;
       
    }
</style>